<script setup>
import { ref } from 'vue';

// 定义是否处于亮色模式
const isLightMode = ref(false);

// 切换主题的函数
function toggleTheme() {
  isLightMode.value = !isLightMode.value;
  document.body.classList.toggle('light-mode', isLightMode.value);
}

// 初始化主题（可选）
if (localStorage.getItem('theme') === 'light') {
  isLightMode.value = true;
  document.body.classList.add('light-mode');
} else {
  document.body.classList.remove('light-mode');
}

// 存储主题到本地存储（可选）
window.addEventListener('beforeunload', () => {
  localStorage.setItem('theme', isLightMode.value ? 'light' : 'dark');
});
</script>
<template>
  <button class="dark-light" @click="toggleTheme">
    {{ isLightMode ? '切换到暗黑模式' : '切换到亮色模式' }}
  </button>
</template>
<style>
@import url(../css/dark-light.css);
</style>
